<template>
  <div class="hea-top" ref="headersmall" v-show="isTop">
    <!-- <el-affix :offset="0" @change="affixChange" index="10"> -->
    <div class="header-top">
      <div class="top-img" @click="goHome()">
        <el-image class="imgstyle" :src="logor" fit="cover" />
      </div>
      <div class="nav-list">
        <div
          class="nav-i"
          @click="routerHandle('work')"
          :class="routerName == 'work' ? 'activeCircle' : ''"
        >
          <span class="en-font">WORK</span>
          <span style="padding-left: 5px">案例</span>
        </div>
        <div
          class="nav-i"
          @click="routerHandle('about')"
          :class="routerName == 'about' ? 'activeCircle' : ''"
        >
          <span class="en-font">ABOUT</span>
          <span style="padding-left: 5px">关于</span>
        </div>
        <div
          class="nav-i"
          @click="routerHandle('service')"
          :class="routerName == 'service' ? 'activeCircle' : ''"
        >
          <span class="en-font">SERVICE</span>
          <span style="padding-left: 5px">服务</span>
        </div>
        <div
          class="nav-i"
          @click="routerHandle('contact')"
          :class="routerName == 'contact' ? 'activeCircle' : ''"
        >
          <span class="en-font">CONTACT</span>
          <span style="padding-left: 5px">联系</span>
        </div>
      </div>
    </div>
    <!-- </el-affix> -->
  </div>
</template>
   
   <script>
import logor from "@/assets/imgs/logor.png";
export default {
  name: "headerSmall",
  props: {
    //  isWhite:{
    //      style:Boolean,
    //      default:false
    //  }
  },
  data() {
    return {
      logor,
      isTop: false,
      routerName: "home",
      lastScrollTop: 0,
    };
  },

  mounted() {
    this.routerName = this.$route.name;
    window.addEventListener("scroll", this.handleScroll);
    window.addEventListener("resize", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
    window.removeEventListener("resize", this.handleScroll);
  },
  methods: {
    goHome() {
      this.$router.push("/");
    },
    routerHandle(val) {
      this.$router.push("/" + val);
    },
    affixChange(val) {
      this.isTop = val;
      this.$emit("headerChange", val);
    },
    handleScroll(e) {

      if (window.scrollY > window.innerHeight - 80) {
        this.isTop = true;
      } else {
        this.isTop = false;
      }
      this.$emit("headerChange", this.isTop);
    },
  },
};
</script>
   <style scoped lang="scss">
.hea-top {
  width: 100%;
  color: #808080;
  font-family: "BebasFont";
  position: fixed;
  font-size: 15px;
  height: 80px;
  top: 0;
  z-index: 10;
  padding: 0 50px;
  background: #fff;
  box-shadow: 0 4px 4px rgba($color: #000000, $alpha: 0.06);
}
.header-top {
  width: 100%;
  display: flex;
  height: 80px;
  justify-content: space-between;
  align-items: center;
}
.nav-list {
  height: 80px;
  display: flex;
  align-items: center;
  // grid-template-columns:repeat(4,1fr) ;
  // grid-gap: 20px;
}
.nav-i {
  cursor: pointer;
  text-align: right;
  padding-left: 30px;
  margin-left: 20px;
  font-size: 20px;
  height: 20px;
  // background-color: blue;
  display: flex;
  align-items: center;
}
.nav-i:hover {
  color: #000000;
}
.top-img {
  height: 100px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.imgstyle {
  width: 200px;
}
.activeCircle {
  position: relative;
  height: 20px;
  color: #000000;
}
.activeCircle::before {
  content: "";
  width: 14px;
  height: 14px;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #ff2141;
  border-radius: 50%;
}
.en-font {
  font-family: "BebasFontEn";
}
</style>